<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<title>title</title>   
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style type="text/css">
	@media all and (max-width:991px;){
		#affix-nav{width:1px;}	
	}
</style>
<script type="text/javascript">
	function logout() {
		location.replace("/OffTheRecord/logout.action");
	}
</script>

</head>
<body data-spy="scroll" data-target="#affix-nav">
<c:import url="../common/top.jsp"></c:import>
<div class="container" style="margin: 30px;"></div>



<!--  -->



<div class="container">
<div class="row">

<nav id="affix-nav" class="sidebar col-xs-2 col-sm-2 col-md-2 col-lg-2" style="border: 1px solid lightgray; border-radius: 5px; padding-top: 30px;">
	<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
		<img class="img-responsive" alt="" src="/OffTheRecord/img/64x64.png">
	</div>	
	
	<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
	<hr size="1" color="gray">
	</div>
	
    <ul class="nav sidenav" data-spy="affix" data-offset-top="10">
        <li class="active">
        	
	<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
	
	<!-- 로그인 상태 여부에 따라서 보여지는 내용을 달리 가져갈 것이다. -->
<c:choose>
	<c:when test="${sessionScope.adminVo==null && sessionScope.userVo == null}">
		<form role="form" action="/OffTheRecord/login.action" method="post">
			<div class="form-group form-group-sm">
				<input type="text" class="form-control input-sm" id="exampleInputEmail1" name="id" placeholder="id">
			</div>
				
				<div class="form-group form-group-sm">
					<input type="password" class="form-control input-sm" name="password" id="exampleInputPassword1" placeholder="Password">
				</div>

				<button type="submit" class="btn btn-default">로그인</button>
			</form>

			<a href="/OffTheRecord/user/register.jsp">회원가입</a>
			<p>
			<a href="/OffTheRecord/user/find_user.jsp">아이디/비밀번호 찾기</a>
			<p>
				

				</c:when>
				<c:when test="${sessionScope.adminVo!=null }">


					<!-- 로그인 후 -->
					<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
						${sessionScope.adminVo.adminId } 님 로그인 중<br>
						<a href="/OffTheRecord/admin/admin_message.jsp">쪽지<span class="badge">42</span></a><br>
						<a href="#" onclick="logout(); return false">로그아웃</a>
					</div>
					<!-- 로그인 후 -->
				</c:when>
				<c:when test="${sessionScope.userVo != null }">


					<!-- 로그인 후 -->
					<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
						${sessionScope.userVo.userId } 님 로그인 중<br>
						<a href="/OffTheRecord/user/user_info.jsp">내 정보 관리</a><br> 
						<a href="/OffTheRecord/user/user_message.jsp">쪽지<span class="badge">42</span></a><br>
						<a href="#" onclick="logout(); return false">로그아웃</a>
					</div>
					<!-- 로그인 후 -->
				</c:when>
				</c:choose>
				
	
	
	</div>
        
        
        <li><a href="#sweetjelly">Sweet Jelly</a></li>
    </ul>
</nav>
 
<section id="content" class="col-md-9">
<!--     <article id="cupcake">
    <h2><a href="http://www.cupcakeipsum.com/#" target="_blank">Cupcake Lorem Ipsum</a></h2>
    <p>Cupcake ipsum dolor sit amet toffee icing. Soufflé muffin danish cotton candy pudding cake danish chocolate candy. Oat cake apple pie ice cream biscuit brownie. Cookie chupa chups jelly lollipop. Chocolate cake sweet gummies ice cream powder gummi bears lemon drops icing caramels. Sesame snaps gingerbread chocolate bar sugar plum fruitcake icing jujubes pie.</p>
        <section id="sweetjelly"><h3>Sweet jelly</h3><p>Macaroon bonbon powder. Chocolate cupcake danish. Apple pie unerdwear.com brownie jelly. Halvah tart fruitcake gingerbread liquorice. Pastry caramels powder. Danish macaroon jujubes dragée croissant ice cream chocolate tootsie roll gummi bears. Tart jelly-o oat cake wafer.</p></section>
        <section id="tiramisu"><h3>Tiramisu</h3><p>Lemon drops chocolate cake jelly beans chocolate wafer unerdwear.com. Apple pie jelly beans topping danish candy canes carrot cake toffee jelly beans. Sweet roll dragée icing applicake cheesecake. Chupa chups pie pastry icing brownie wafer jujubes powder danish. Topping tiramisu danish jelly beans chupa chups dragée. Cake tootsie roll sweet roll marshmallow topping pudding toffee powder. Bear claw sesame snaps gummies unerdwear.com topping biscuit muffin. Donut chocolate muffin cotton candy marshmallow applicake.</p></section>
        <section id="pie"><h3>Pie</h3><p>Sugar plum sweet roll oat cake muffin tootsie roll danish brownie. Toffee cheesecake pudding pastry lollipop dessert candy chocolate cake wafer. Chupa chups marshmallow jelly caramels pie candy canes gummi bears wafer carrot cake. Wafer marshmallow chocolate cotton candy brownie. Lemon drops oat cake halvah cookie liquorice pie. Tart tootsie roll chupa chups cake wafer bear claw tart unerdwear.com. Cookie bonbon tart lollipop gummi bears pudding wafer danish. Marzipan cake dessert chupa chups tart chocolate cake bonbon jujubes. Unerdwear.com biscuit cookie cake gummies sweet roll tart caramels.</p></section>
    </article>
    <br />
    <article id="veggie">
        <h2><a href="http://veggieipsum.com/" target="_blank">Veggie Lorem Ipsum</a></h2>
        <p>Veggies sunt bona vobis.....
..
     </article> -->
     
<!-- 오른쪽 - 중앙 -->
					<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8"
						style="border: 1px solid lightgray; border-radius: 5px; padding: 10px;">

						<!-- main carousel(전광판) -->
						<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"
							style="border: 1px solid lightgray; border-radius: 5px; padding: 10px;">

							<div class="bs-example">
								<div id="carousel-example-captions" class="carousel slide"
									data-ride="carousel">
									<ol class="carousel-indicators">
										<li data-target="#carousel-example-captions" data-slide-to="0"
											class="active"></li>
										<li data-target="#carousel-example-captions" data-slide-to="1"></li>
										<li data-target="#carousel-example-captions" data-slide-to="2"></li>
									</ol>
									<div class="carousel-inner" role="listbox">
										<div class="item active">
											<img data-src="holder.js/900x500/auto/#777:#777"
												src="/OffTheRecord/img/300x200.png" alt="First slide image">
											<div class="carousel-caption">
												<h3>First slide label</h3>
												<p>Nulla vitae elit libero, a pharetra augue mollis
													interdum.</p>
											</div>
										</div>
										<div class="item">
											<img data-src="holder.js/900x500/auto/#666:#666"
												src="/OffTheRecord/img/300x200.png" alt="Second slide image">
											<div class="carousel-caption">
												<h3>Second slide label</h3>
												<p>Lorem ipsum dolor sit amet, consectetur adipiscing
													elit.</p>
											</div>
										</div>
										<div class="item">
											<img data-src="holder.js/900x500/auto/#555:#5555"
												src="/OffTheRecord/img/300x200.png" alt="Third slide image">
											<div class="carousel-caption">
												<h3>Third slide label</h3>
												<p>Praesent commodo cursus magna, vel scelerisque nisl
													consectetur.</p>
											</div>
										</div>
									</div>
									<a class="left carousel-control"
										href="#carousel-example-captions" role="button"
										data-slide="prev"> <span
										class="glyphicon glyphicon-chevron-left"></span> <span
										class="sr-only">Previous</span>
									</a> <a class="right carousel-control"
										href="#carousel-example-captions" role="button"
										data-slide="next"> <span
										class="glyphicon glyphicon-chevron-right"></span> <span
										class="sr-only">Next</span>
									</a>
								</div>
							</div>

						</div>
						<!-- main carousel(전광판) -->

						<!-- right-conter-left -->
						<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
							<div>
								<h6>어떤 회사를 찾으시나요?</h6>
								<hr color="gray">
								<div role="form">
									<input type="text" class="form-control" id="company_search">
								</div>
							</div>
							<div>
								<h2>중앙에 좌측 컨텐츠</h2>
								<img alt="" src="/OffTheRecord/img/300x200.png" class="img-responsive">
								<p></p>
								<p>
									<a class="btn btn-default" href="#" role="button">View
										details &raquo;</a>
								</p>
							</div>
							<div>
								<h2>중앙에 좌측 컨텐츠</h2>
								<img alt="" src="/OffTheRecord/img/300x200.png" class="img-responsive">
								<p></p>
								<p>
									<a class="btn btn-default" href="#" role="button">View
										details &raquo;</a>
								</p>
							</div>

						</div>
						<!-- right-conter-left -->

						<!-- center-right -->
						<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">

							<div>
								<h2>중앙에 우측 컨텐츠</h2>
								<img alt="" src="/OffTheRecord/img/300x200.png" class="img-responsive">
								<p></p>
								<p>
									<a class="btn btn-default" href="#" role="button">View
										details &raquo;</a>
								</p>
							</div>

							<div>
								<h2>중앙에 우측 컨텐츠</h2>
								<img alt="" src="/OffTheRecord/img/300x200.png" class="img-responsive">
								<p></p>
								<p>
									<a class="btn btn-default" href="#" role="button">View
										details &raquo;</a>
								</p>
							</div>

							<div>
								<h2>공지사항</h2>
								<div>새롭게 페이지가 바뀌었습니다..!</div>
								<p>
									<a class="btn btn-default" href="#" role="button">View
										details &raquo;</a>
								</p>
							</div>

						</div>
						<!-- right-center-right -->

					</div>
					<!-- right-center -->

					<!-- right-right -->
					<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4" style="border: 1px solid lightgray; border-radius: 5px; padding: 10px;">

						<div class="col-xs-6 col-sm-6 col-md-12 col-lg-12" style="border: 1px solid lightgray; border-radius: 5px;">

							<div>
								<h2>우측에 좌측 컨텐츠</h2>
								<img alt="" src="/OffTheRecord/img/300x200.png" class="img-responsive">
								<p></p>
								<p>
									<a class="btn btn-default" href="#" role="button">View
										details &raquo;</a>
								</p>
							</div>

							<div>
								<h2>우측에 좌측 컨텐츠</h2>
								<img alt="" src="/OffTheRecord/img/300x200.png" class="img-responsive">
								<p></p>
								<p>
									<a class="btn btn-default" href="#" role="button">View
										details &raquo;</a>
								</p>
							</div>

						</div>

						<div class="col-xs-6 col-sm-6 col-md-12 col-lg-12"
							style="background-color: lavender;">

							<div>
								<h2>우측에 우측 컨텐츠</h2>
								<img alt="" src="/OffTheRecord/img/300x200.png" class="img-responsive">
								<p></p>
								<p>
									<a class="btn btn-default" href="#" role="button">View
										details &raquo;</a>
								</p>
							</div>

							<div>
								<h2>우측에 우측 컨텐츠</h2>
								<img alt="" src="/OffTheRecord/img/300x200.png" class="img-responsive">
								<p></p>
								<p>
									<a class="btn btn-default" href="#" role="button">View
										details &raquo;</a>
								</p>
							</div>

						</div>

					</div>
					<!-- right-right -->
     
     
</section>      
</div><!-- end of row -->
</div><!-- end of container -->
 





<!--  -->

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>   
</body>
</html>